<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >

        <div class="m-t-xs m-t-sm">
          <span>系统管理</span>
          <i class="fa fa-angle-right"></i>
          <span>群组管理 </span>
          <i class="fa fa-angle-right"></i>
          <span>群组列表</span>
        </div>

      </div>
    </div>
  </div>
  <div class="wrapper-sm" style="font-size:12px">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body">
        <div class="row" >
          <div class="col-lg-6">
            <form class="bs-example form-horizontal">
              <div class="form-group">
                <div class="col-lg-9 ">
                  <div class="input-group">
                    <input  [(ngModel)]="keyword" type="text" class="form-control input-sm ng-valid ng-dirty" placeholder="群组id、群组名称、描述..." name="keyword">
                <span class="input-group-btn">
                  <button class=" btn btn-default btn-sm" type="button" >搜索</button>
                </span>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="col-lg-6" >
            <button (click)="newModal()" class="btn btn-info btn-sm pull-right"  style="margin-right: 10px">新增</button>
          </div>
        </div>
        <table  class="table table-striped table-hover m-b-none "  >
          <thead>
          <tr>
            <th  style="width:20%">群组ID</th>
            <th  style="width:20%">群组名称</th>
            <th  style="width:20%">群组联系人</th>
            <th  style="width:20%">群组联系人电话</th>
            <th  style="width:20%">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let aaData of data">
            <td>{{aaData.id}}</td>
            <td>{{aaData.name}}</td>
            <td>{{aaData.lxr}}</td>
            <td>{{aaData.lxdh}}</td>
            <td>
              <a (click)="editModal(aaData);" >
                <span tooltip="{{tool.editgroupTooltip}}" class="glyphicon glyphicon-pencil" style="color: green;margin-right: 10px" ></span>
              </a>

              <a (click)="deleteModal(aaData);" >
                <span class="glyphicon glyphicon-remove" tooltip="{{tool.deletegroupTooltip}}" style="color: red;margin-right: 10px" ></span>
              </a>



            </td>
          </tr>
          </tbody>
        </table>



      </div>
    </div>
  </div>

</div>

<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">新增群组</p>
            <p *ngIf="buttonType==2">编辑群组</p>
            <p *ngIf="buttonType==3">删除群组</p>
          </h3>
        </div>
        <div class="modal-body">

          <div class="row">
            <div *ngIf="buttonType!=3" class="col-sm-10">
              <div class="bs-example form-horizontal">                

                <div class="form-group">
                  <label class="col-lg-3 control-label">群组名称</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control"  [(ngModel)]="model.name" placeholder="请输入群组名称">
                  </div>
                  <div class="col-lg-2" style="color:red;margin-top: 8px;">
                    <p [hidden]="model.name">必填</p>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">群组联系人</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control"  [(ngModel)]="model.man" placeholder="请输入群组联系人">
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">联系人电话</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control"  [(ngModel)]="model.phone" placeholder="请输入联系人电话">
                  </div>
                </div>


              </div>
            </div>

            <alert *ngIf="buttonType==3" type="danger">
              <h4>确定要删除<strong>{{ model.name }}</strong>吗？<br/><br/>
                如果点击 删除按钮 后，将会把这个群组下所有的设备都删除，以及其相关连的操作都会被删除</h4>
            </alert>

          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-info" *ngIf="buttonType==1" (click)="confirmNew()" [disabled]="disabled||!model.name">保存</button>
          <button class="btn btn-info" *ngIf="buttonType==2" (click)="confirmEdit()" [disabled]="disabled">保存</button>
          <button class="btn btn-danger" *ngIf="buttonType==3" (click)="confirmDelete()" [disabled]="disabled">删除</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>
